<template>
  <div class="attendee">
    <div>
      <div class="title">
        <div class="meeting-theme" style="line-height: 48rpx">{{general_content.title}}</div>
<!--        <div class="section">环节:环节标题</div>-->
      </div>
      <div class="ppt">
<!--        <image  class="ppt-img" mode="aspectFit" :src='content.img_url'></image>-->
<!--        <video v-if="content.type == 'video'" class="ppt-img" mode="aspectFit" :src='content.video_url' autoplay></video>-->
      </div>
      <div class="ppt-text">{{general_content.content}}</div>
      <div class="talk">
<!--        <span style="padding: 5rpx;color: white">讨论内容展示：</span>-->
        <div class="talk-input">
          <!-- <img src="../../static/img/voice.png"></img> -->
          <input type="text" maxlength="-1" placeholder="请输入讨论内容" placeholder-style="color:#fff" style="width: 100%" v-model="content">
<!--          <img style="margin-right: 10rpx;width: 80rpx;height: 75rpx" src="http://file.rzkeji.com/web/dang/wxapp/yy.png" @longpress="getAudio" @touchend="stopAudio">-->
<!--          <span>发送</span>-->
        </div>
        <div>
          <button style="margin: 30rpx 0" @click="setGeneralComment">发表学习感悟</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getGeneralDetail, setGeneralComment} from "../../api";

export default {
  data(){
    return{
      meeting_title: '',
      key:"",
      general_content:"",
      content:"",
    }
  },
  onShow(){
  },
  onLoad(options){
    this.key=options.key;
    console.log(options);
    this.getGeneralDetail();
  },
  methods:{
    async getGeneralDetail(){
      let params = {
        qrcode_key:this.key,
        user_token: uni.getStorageSync('userToken'),
      }
      let res = await this.$api.getGeneralDetail(params);
      if(res.data.level == "success"){
        this.general_content = res.data.data;
        // console.log(a);
        // this.getRandomQuestion();
      }
    },
    async setGeneralComment(){
      let params = {
        qrcode_key:this.key,
        user_token: uni.getStorageSync('userToken'),
        content:this.content
      }
      let res = await this.$api.setGeneralComment(params);
      uni.showToast({
        title: res.data.message,
        icon: 'none',
        duration: 1000
      })
    },
  }
}
</script>
<style lang='scss' scoped>
.attendee{
  width: 100vw;
  min-height: 100vh;
  background-color: #d90913;
  /*background: url("http://file.rzkeji.com/web/dang/wxapp/back.png") no-repeat;*/
  /*background-size: 100%;*/
  .maxqrcode{
    position: fixed;
    z-index: 20000;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    img{
      width: 100%;
      padding: 20rpx;
      background-color: #ffffff;
    }
  }
  .qrcodenav{
    position: fixed;
    z-index: 9999;
    right: 20rpx;
    bottom: 20%;
    width: 50rpx;
    height: 50rpx;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .waiting_out{
    width: 100%;
    padding: 10px;
    .send{
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #FFFFFF;
      background-color: #ffda2f;
      border-radius: 12rpx;
      margin-top: 50rpx;
    }
  }
  .waiting_content{
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*flex-direction: column;*/
    width: 100vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffda2f;
  }
  .title{
    width: 100%;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffda2f;
    .meeting-theme{
      font-size: 38rpx;
      margin-bottom: 30rpx;
      text-align: center;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .section{
      font-size: 28rpx;
      text-align: center;
    }
  }
  .ppt{
    width: 750rpx;
    .ppt-img{
      width: 100%;
    }
  }
  .ppt-text{
    border: 1px solid #ffda2f;
    border-radius: 14rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    color: #ffda2f;
    font-size: 28rpx;
    line-height: 42rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    line-clamp: 10;
    -webkit-box-orient: vertical;
  }
  .talk{
    margin-top: 20rpx;
    width: 100%;
    padding:0 20rpx;
    .talk-warp{
      width: 674rpx;
      border: 1px solid #ffda2f;
      border-radius: 14rpx;
      padding: 20rpx;
      height: 300rpx;
      overflow: scroll;
      .talk-box{
        width: 100%;
        .talk-list{
          display: flex;
          align-items: center;
          margin-bottom: 14rpx;
          .talk-list-info{
            color: #ffda2f;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
              width: 60rpx;
              height: 60rpx;
              border-radius: 50%;
              margin-right: 8rpx;
            }
            span{
              margin-top: 4rpx;
              font-size: 22rpx;
            }
          }
          .talk-list-content{
            font-size: 24rpx;
            color: #ffda2f;
            margin-left: 8rpx;

            .icon-audio{
              animation: heartAnimation 0.7s linear 0s infinite;
            }
            @keyframes heartAnimation {
              form {
                transform: scale(0.9,0.9);
              }
              to {
                transform: scale(1.1,1.1);
              }
            }
          }
        }
      }
    }
    .talk-input{
      padding: 20rpx 0;
      width: 100%;
      display: flex;
      align-items: center;
      img{
        width: 60rpx;
        height: 60rpx;
      }
      input{
        width: 580rpx;
        border-bottom: 1px solid #ffda2f;
        color: #ffda2f;
      }
      span{
        color: #FFFFFF;
        font-size: 32rpx;
        width: 140rpx;
        text-align: center;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 50rpx;
        background-color: #ffda2f;
        margin-left: 4rpx;
      }
    }
  }
  .attendee-count{
    width: 100%;
    border: 1px solid #ffda2f;
    border-radius: 14rpx;
    padding: 10rpx;
    margin-bottom: 20rpx;
    background-color:#d90913;
    .attendee-count-title{
      font-size: 36rpx;
      color: #ffda2f;
      margin-bottom: 20rpx;
    }
    .attendee-count-content{
      height: 142rpx;
      display: flex;
      flex-wrap: wrap;
      overflow-x: hidden;
      overflow-y: scroll;
      .attendee-count-list{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 14rpx 20rpx 0;
        img{
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
        span{
          height: 42rpx;
          line-height: 42rpx;
          font-size: 28rpx;
          color: #ffda2f;
        }
      }
    }
  }

  .speak{
    position: fixed;
    z-index: 900;
    display: block;

    .bk{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000000;
      opacity: 0.8;
      filter: alpha(opacity = 0);
      z-index: 901;
    }

    .content{
      width: 80%;
      background: #fff;
      position: fixed;
      margin: 0px auto 0 -40%;
      left: 50%;
      border-color: #fff;
      border-width: 5px 0px;
      z-index: 1001;
      top: 45%;
      text-align: center;
      height: auto;
      border-radius: 6px;

      p{
        padding: 30rpx 10rpx 10rpx 10rpx;
        font-size: 30rpx;
      }
      button{
        background-color: #dd524d;
        width: 50%;
        margin: 20rpx auto;
        font-size: 28rpx;
        color: white;
      }
    }
  }
}
</style>
